<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IPP 愛加加星座交友網</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
		</script>
		<style>
		 .menu {border-radius: 5px}
		</style>
		<script type="text/javascript" src="js/index.js"></script>
		<!-- menu -->
		<link rel="stylesheet" href="css/normalize_menu.css">
		<link rel="stylesheet" href="css/main_menu.css">
		<script src="js/analytics.js"></script>
		<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="js/main_menu.js"></script>
		<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		ga('create', 'UA-1383589-5', 'shiftbrain.co.jp');
		ga('send', 'pageview');
		</script>
		<!-- menu -->
		<!-- slideshow -->
		<script>
			$(window).load(function() {
  			$('.flexslider').flexslider({
 		   		animation: "slide"
 			 });
			});
		</script>
		<script type="text/javascript" src="<c:url value="/js/jquery.flexslider-min.js" />"></script>
		<link rel="stylesheet" type="text/css" href="<c:url value="/css/flexslider.css" />" /> 
		<!-- slideshow -->
		<!-- fancybox -->
		<script>
			$(window).load(function() {
				$(function(){
				    $('.fancybox').fancybox();
				});
			});
		</script>
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.mousewheel-3.0.6.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/jquery.fancybox.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.fancybox.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-buttons.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-buttons.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-thumbs.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-thumbs.js" />"></script>
		<!-- fancybox -->
</head>
	<body  bgcolor="#333333"><!-- #222222 rgba(255, 0, 0, 0.1)-->
		<!-- 頭頂 -->
		<c:if test="${empty user}"> 
		<div style="margin: 0px auto;width: 700px;">
			<img src="images/logo.png" height="60" width="170"/>
			<span height="30" width="90" style="float:right;">
			<a class="fancybox"  href="#Showlogin"><span style="color: white;font-size:15px">登入</span></a>
			<a class="fancybox"  href="<c:url value="member.jsp" />"><span style="color: white;font-size:15px">我要註冊</span></a>		
			</span>
		</div>
		<br><br><br>
		</c:if>
		
		<c:if test="${not empty user}"> 
		<div style="margin: 0px auto;width: 700px;">
			<img src="images/logo.png" height="60" width="170"/>
			<span height="30" width="90" style="float:right;">
			<span style="color: white;font-size:15px">${user}</span>
			<img src="data:${userpic }" width="50px">		
		</div>
		<br><br><br>
		</c:if>
		<!-- 頭頂 -->
		<!-- 內文 -->
		<div style="margin: 0px auto;width: 700px;">
			<!-- 本日精選 -->
			<div style="width: 700px;height: 200px;overflow: hidden;position: relative;">
			<div id="today_image" style="position: absolute;top:0px"><!-- javascript動態改top的數值 -->
			<a href=""><img src="images/beauty01.jpg" width="700" style="display:block; margin:auto;"/></a><br>
			</div>
			</div>
			<br><br><br>
			<!-- 本日精選 -->
			<!-- menu -->
			<c:if test="${not empty user}"> 
			<div class="page-main" role="main">
    		<aside class="" style="left: -260px;">
        		<ul>
           		 <li><a href="<c:url value="/View/ChatServlet.controller?fromacc=${user }" />"><img src="images/chat.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="/View/Match.jsp" />"><img src="images/match.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="/View/SendGiftServlet.controller" />"><img src="images/market.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="" />"><img src="images/map.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="/View/Tarot.jsp" />"><img src="images/tarot.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="/View/Tarot.jsp" />"><img src="images/tarot.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
           		 <li><a href="<c:url value="/View/Tarot.jsp" />"><img src="images/tarot.jpg" style="border-radius:50px 50px" width="100px" height="100px"></a></li>
        		</ul>
        		<button><img src="images/btn_open.png"></button>
   			 </aside>
			 </div>
			</c:if>
			 <!-- menu -->
			<!-- 愛情隨筆slideshow -->	
				<div class="flexslider" >
  				<ul class="slides">
    			<li>
    			<div style="float: right; width: 350px;">
    			<img src="images/beauty01.jpg" width="350"/></div>
    			<p style="float: left">beauty05<br>beauty05</p>
    			</li>
    			<li>
    			<div style="float: right; width: 350px;">
    			<img src="images/beauty02.jpg" width="350"/></div>
    			<p style="float: left">beauty05<br>beauty05</p>
    			</li>
    			<li>
    			<div style="float: right; width: 350px;">
    			<img src="images/beauty03.jpg" width="350"/></div>
    			<p style="float: left">beauty05<br>beauty05</p>
    			</li>
 				</ul>
				</div>		
			<!-- 愛情隨筆slideshow -->
			
			<!-- 每日之星 第一列-->
			<div style="margin-right: 10px;width: 280px;height: 230px;background-color: #666666;float: left;margin-top: 15px;">
				<img src="images/beauty03.jpg" width="150px" height="150px" style="float:left;"/>
				
			</div>
			<div style="margin-right: 10px;width: 200px;height: 230px;float: left;margin-top: 15px;">
				<img src="images/beauty05.jpg" width="93px" height="108px" style="border:1px solid #666666;float:right;margin-bottom: 10px;"/>
				<img src="images/beauty06.jpg" width="93px" height="108px" style="border:1px solid #666666;float:left;margin-bottom: 10px;"/>
				<img src="images/beauty07.jpg" width="93px" height="108px" style="border:1px solid #666666;float:right;"/>
				<img src="images/beauty01.jpg" width="93px" height="108px" style="border:1px solid #666666;float:left;"/>
				
			</div>
			<div style="width: 200px;height: 230px;float: left;margin-top: 15px;">
				<img src="images/beauty02.jpg" width="93px" height="228px" style="border:1px solid #666666;float:right;margin-left: 9px"/>
				<img src="images/beauty03.jpg" width="93px" height="228px" style="border:1px solid #666666;float:left;"/>
			</div>
			<!-- 每日之星 第一列-->
			<!-- 每日之星 第二列-->
			<div style="margin-right: 10px;width: 140px;height: 230px;float: left;margin-top: 15px;">
				<img src="images/beauty04.jpg" width="140px" height="230px" style="float:left;"/>
				
			</div>
			<div style="margin-right: 10px;width: 130px;height: 230px;background-color: #666666;float: left;margin-top: 15px;">
				
			</div>
			<div style="margin-right: 10px;width: 200px;height: 230px;float: left;margin-top: 15px;">
				<img src="images/beauty04.jpg" width="93px" height="108px" style="border:1px solid #666666;float:right;margin-bottom: 10px"/>
				<img src="images/beauty03.jpg" width="93px" height="108px" style="border:1px solid #666666;float:left;margin-bottom: 10px;"/>
				<img src="images/beauty07.jpg" width="93px" height="108px" style="border:1px solid #666666;float:right;"/>
				<img src="images/beauty01.jpg" width="93px" height="108px" style="border:1px solid #666666;float:left;"/>
				
			</div>
			<div style="width: 200px;height: 230px;float: left;margin-top: 15px;">
				<img src="images/beauty05.jpg" width="198px" height="228px" style="border:1px solid #666666;float:left;"/>
			</div>
			<!-- 每日之星 第二列-->
		
		</div>
		<!-- 內文 -->
		<!-- footer -->
		<div style="width: 101%;height:150px;background-color: rgba(0, 255, 200, 0.1);float: left;margin-top: 50px;">
		
		</div>
		<!-- footer -->
		
		<!-- hidden -->
		<div style="display:none">
		
		<div id="Showlogin">
		<script type="text/javascript">
		//點驗證碼圖片可以更換新的一組驗證碼
		function getSecureNumber(){ 
	 	$('#securenumber').attr("src","<c:url value='/SecurePic.controller'/>");
		 }</script>
		 <!--<form > action="<c:url value='/secure/LoginServlet.controller'/>" method="post" -->
			<table>
			<tr>
				<td>ID : </td>
				<td><input type="text" id="account" name="account" value="${account}"></td>
			</tr>
			<tr>
				<td>PWD : </td>
				<td><input type="text" id="password" name="password" value="${password}"></td>
			</tr>
			<tr>
				<td><img id="securenumber" src="<c:url value='/SecurePic.controller' />"  onclick="getSecureNumber()"/></td>
				<td><input type="text" id="securepassword" ></td>
			</tr>
			<tr>
				<td>　</td>
				<td id="error"></td>
			</tr>
			<tr>
				<td>　</td>
				<td align="right"><input type="submit" value="登入" onclick="login();"></td>
			</tr>
			</table>
		<!-- </form> -->
		</div>
		
		</div>
		<!-- hidden -->
	</body>

</html>